<template>
  <div>
    <el-dialog title="关联门店" class="noselect" :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
    <div v-show="page1">
      <div class="text-center" style="padding-bottom:15px">第一步:填写相关信息</div>
      <el-form   :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label=" " prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input placeholder="请输入用户名" v-model="modelForm.username" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入用户名">
                <el-button tabIndex="-1">用户名</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
          <el-input type="password" placeholder="请输入密码" v-model="modelForm.password" auto-complete="off" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="请输入密码">
                <el-button tabIndex="-1">密码</el-button>
              </el-tooltip>
            </template>
          </el-input>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="" :rules="[{ required: true, message: '请选择上级机构', trigger: 'blur' }]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
            <el-cascader placeholder="请选择上级机构" class="el-cascader-margin w-100p"  size="medium"
                         :options="treeData"
                         :show-all-levels="false" v-model="downCategeryId"
                         change-on-select>
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label=" ">
          <div class="el-from-item_title">门店属性</div>
          <div class="el-from-item_content text-left" style="margin-left:80px">
            <el-radio-group v-model="modelForm.propType" @change="changeData">
              <el-radio :label="i.key" :value="i.text" v-for="i in propTypes">{{i.text}}</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label=" " prop="templateId">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">权限模板</div>
            <el-select class="el-cascader-margin w-100p" v-model="modelForm.templateId" placeholder="请选择权限模板">
              <el-option
                v-for="item in templateList"
                :key="item.id"
                :label="item.name"
                size="medium"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="page2">
        <div>重要提示：单店的所有会员数据会清空,需要导出门店会员数据，从总部统一导入,请按以下操作步骤;</div>
        <div style="padding:20px">第二步:导出单店的会员数据</div>
        <el-button type="primary" size="medium" @click="exportData">导出会员数据</el-button>
    </div>
    <div v-show="page3">
        <div style="padding-bottom:20px">第三步:填写手机验证码</div>
        <el-form  :model="checkForm" ref="checkForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label=" ">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <el-input :disabled="true" v-model="checkForm.phone" auto-complete="off" size="medium" >
              <template slot="prepend">
                <el-tooltip placement="top" content="请输入密码">
                  <el-button tabIndex="-1">已验证手机号码</el-button>
                </el-tooltip>
              </template>
            </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="code" :rules="[{trigger: 'blur' }]" class="register_dxyz">
            <el-input placeholder="请输入验证码" v-model="checkForm.code" class="w-100p">
              <template slot="prepend">
                <el-tooltip placement="top" content="请输入验证码">
                  <el-button tabIndex="-1">获取验证码</el-button>
                </el-tooltip>
              </template>
                <el-button slot="append" v-if="!time>0" @click="getCode">发送短信</el-button>
                <el-button  slot="append" v-if="time>0">{{time}}后重新发送</el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="text-left" style="color:red;padding-left:100px;">
          <div style="">重要提示:点击确定后:</div>
          <div style="">1、清空门店会员数据,请确保已经导出门店会员数据,否则数据丢失后果自负!</div>
          <div style="">2、去连锁总部会员管理模块下载导入会员模板;</div>
          <div style="">3、将单店会员数据整理到模板中,执行导入操作;</div>
        </div>
    </div>
    <div v-show="page4">
        <div style="font-weight:600;font-size:15px;color:red">再次提示：点击确定后,单店账号会关联为连锁门店账号,并且清空单店会员数据,你确定执行此操作？</div>
    </div>
    <div v-show="page5">
        <div>第四步:完成关联</div>
        <div style="margin:20px;font-weight:600;font-size:17px">恭喜您,您已经成功将单店转成连锁门店!</div>
        <div style="padding:0 100px">温馨提示:关联成功后，门店门店报表数据将在次日凌晨才能同步到总部,在这期间,总部查看此门店报表数据可能不全,给您带来的不便敬请谅解</div>
    </div>
      <div class="foot-bar-button" v-show="page5">
        <el-button type="primary" @click="handleClose" size="medium">确定</el-button>
      </div>
      <div class="foot-bar-button" v-show="page4">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">确定</el-button>
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
      <div class="foot-bar-button" v-show="page3">
        <el-button type="primary" size="medium" @click="returnPage">上一步</el-button>
        <el-button type="primary" @click="nextPage('checkForm')" size="medium">确定</el-button>
      </div>
      <div class="foot-bar-button" v-show="page1">
        <el-button type="primary" @click="nextPage('modelForm')" size="medium">下一步</el-button>
      </div>
      <div class="foot-bar-button" v-show="page2">
        <el-button type="primary" size="medium" @click="returnPage">上一步</el-button>
        <el-button type="primary" size="medium" :disabled="disabled" @click="nextPage">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//注意路径
export default {
  props: ["isShow", "id"], //参数
  data() {
    var chackPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      modelForm: {
        password: "",
        propType: "",
        templateId:"",

      },
      propTypes:[],
      templateList:[],
      checkForm: {
        phone: "",
        code: ""
      },
      options:[],
      showDialog: false,
      disabled: true,
      activityId: "",
      isSave: true,
      downCategeryId: [],
      isUpdate: false,
      treeData: [],
      radio: "",
      city: [],
      page1: true,
      page2: false,
      page3: false,
      page4: false,
      page5: false,
      time: 0,
      merchant:{}

    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      if (newValue) {
        if (this.id != "") {
          this.activityId = this.id;
          this.isSave = false;
          this.isUpdate = true;

          // this.$axios
          //   .get("organization/branchs/" + this.activityId + "/update")
          //   .then(data => {
          //     this.modelForm = data.content.materialCategory;
          //     var dataValue = data.content;
          //     var tree = dataValue.treeData;
          //     this.newLabel(tree);
          //     this.treeData = tree;
          //     dataValue.materialCategory.parentId =
          //       dataValue.materialCategory.parentId + "";
          //     this.downCategeryId = [dataValue.materialCategory.parentId];
          //   });
        } else {
          this.isSave = true;
          this.isUpdate = false;
          this.$axios.get("organization/branchs/create").then(data => {
            // this.modelForm = data.content.materialCategory;
            this.modelForm.propType=data.content.propTypes[0].key;
            var dataValue = data.content;
            var tree = dataValue.districtList;
            this.newLabel(tree);
            this.treeData = tree;
            this.propTypes=data.content.propTypes;
            this.templateList=data.content.templateList;
            console.log(this.treeData);
            this.changeData();
          });
        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    changeData(){
      for(var i=0;i<this.templateList.length;i++){
        if(this.templateList[i].name.indexOf('直营店模板')==0 && this.modelForm.propType=='DIRECT'){
          this.modelForm.templateId=this.templateList[i].id;
          /*this.modelForm.propType=='DIRECT'*/
        }else if(this.templateList[i].name.indexOf('加盟店模板')==0 && this.modelForm.propType=='LEAGUE'){
          this.modelForm.templateId=this.templateList[i].id;
        }
      }

    },
    returnPage() {
      if (this.page2 == true) {
        this.page2 = false;
        this.page1 = true;
        return;
      }
      if (this.page3 == true) {
        this.page3 = false;
        this.page2 = true;
        return;
      }
    },
    exportData() {
      this.disabled = false;
    },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          newList[i].children = null;
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    submitForm(formName) {
      console.log(this.modelForm);
      console.log(this.checkForm);
      var data={};
      data.branch=this.modelForm;
      data.merchant=this.merchant;
      data.code=this.checkForm.code;
      data.phone=this.checkForm.phone;

      this.$refs[formName].validate(valid => {
        this.$axios.post("organization/branchs/saveRelevance",data,"json").then(res=>{
          if(res.success){
            this.$message.success(res.message);
            this.page1= false;
            this.page2= false
            this.page3= false
            this.page4= false
            this.page5= true;
            return;
          }else{
            this.$message.error(res.message);
            return;
          }

        },res=>{})

      });
      // this.$refs[formName].resetFields();
      // this.$emit("close");

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("close");
      this.page1= true
      this.page2= false
      this.page3= false
      this.page4= false
      this.page5= false
    },
    handleClose(done) {
      this.$emit("close");
      done();
      this.page1= true
      this.page2= false
      this.page3= false
      this.page4= false
      this.page5= false
      // this.$refs[this.modelForm].resetFields();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    nextPage(formName) {
      if (this.page1 == true) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            console.log("uuuuu");
            if(this.downCategeryId.length<=0){
              this.$message.error("请选择区域");
              return;
            }
            this.modelForm.districtId=this.downCategeryId[this.downCategeryId.length-1];
            this.$axios.post("organization/branchs/verify",this.modelForm).then(res=>{

              if(res.success){
                this.merchant=res.content;
                this.checkForm.phone=res.content.phone;
                this.page1 = false;
                this.page2 = true;
              }

            },res=>{})
          } else {

          }
        });

      }
      if (this.page2 == true) {
        this.page2 = false;
        this.page3 = true;
        return;
      }
      if (this.page3 == true) {
        console.log("8888");
        this.$refs[formName].validate(valid => {
          this.$axios.get("organization/branchs/verifySmsCode", {
            phone: this.checkForm.phone,
            code: this.checkForm.code
          }).then(res => {
            if (res.success) {
              this.page4 = true;
              this.page3 = false;
              return;
            } else {
              this.$message.error(res.message);
              return;
            }

          }, res => {
          })
        })

      }
      if(this.page4 == true){
        this.page4 = false;
        this.page5 = true;
      }
      // this.$refs[formName].resetFields();
    },
    getCode(){
      /*验证码*/
      if(!(/^1[3|2|4|5|7|8][0-9]\d{4,8}$/.test(this.checkForm.phone))){
        this.$message.error("请填写正确的手机号");
        return false;
      }
      if (this.checkForm.phone && this.checkForm.phone!="") {
        var $this = this;
        this.$axios.get("organization/merchantGroups/sendCode",{phone:this.checkForm.phone}).then(response=>{
          if(response.success){
            this.isShowSms=true;
            window.countDown = 60;
            this.time=window.countDown;
            window.t = setInterval(function () {
              window.countDown--;
              $this.time = window.countDown;
              if (window.countDown == 0) {
                window.clearInterval(window.t)
              }
            }, 1000);
            this.$message.success("验证码发送成功");
          }else{
            this.$message.error(response.message);
          }
        });
      }else{
        this.$message.error("请输入手机号");
      }

    },
  }
};
</script>
<style scoped>
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
</style>
